{% set fsf_step = "package" %}
{% extends "first-snap/_layout_fsf.html" %}

{% block fsf_content %}
  <div class="row">
    <div class="p-accordion" role="tablist" aria-multiselect="true">
      <ol class="p-accordion__list">
        <li class="p-accordion__group">
          <button {% if has_user_chosen_name %}aria-expanded="false"{% else %}aria-expanded="true"{% endif %} type="button" class="p-accordion__tab" id="tab1" role="tab" aria-controls="#tab1-section" >
            <h4 class="u-no-margin--bottom">
              Step 1: Choose snap name
              {% if has_user_chosen_name %}<i class="p-icon--success"></i>{% endif %}
            </h4>
          </button>
          <section class="p-accordion__panel" id="tab1-section" role="tabpanel" {% if has_user_chosen_name %}aria-hidden="true"{% else %}aria-hidden="false"{% endif %} aria-labelledby="tab1-section">
            <div class="p-strip is-shallow">
              <div class="row">
                <div class="col-8">
                  <form id="choose-name-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <label>Please pick a snap name for the purpose of this tutorial:</label>
                    <div class="p-form-validation">
                      <input class="p-form-validation__input" type="text" name="snap-name" value="{{ snap_name }}" />
                      <p class="p-form-validation__message" id="input-error-message-inline" role="alert">
                        Name should only have lowercase letters, numbers, and hyphens, must have at least one letter, and cannot start or end with a hyphen.
                      </p>
                    </div>
                    <button class="p-button--positive" {% if "{name}" in snap_name %} disabled{% endif %}>Choose snap name</button>
                  </form>
                </div>
              </div>
            </div>
          </section>
        </li>
        <li class="p-accordion__group">
          <button {% if has_user_chosen_name %}aria-expanded="true"{% else %}aria-expanded="false"{% endif %} type="button" class="p-accordion__tab" id="tab2" role="tab" aria-controls="#tab2-section" >
            <h4 class="u-no-margin--bottom">
              Step 2: Download an example app
              <i class="p-icon--success u-hide"></i>
            </h4>
          </button>
          <section class="p-accordion__panel" id="tab2-section" role="tabpanel" {% if has_user_chosen_name %}aria-hidden="false"{% else %}aria-hidden="true"{% endif %} aria-labelledby="tab2-section">
            <div class="p-strip is-shallow">
              <div class="row">
                <div class="col-8">
                  <p>Clone the following application to use for the purpose of this tutorial:</p>
                  {% set snippet_value = steps.download %}
                  {% set snippet_id = "download" %}
                  {% include "/partials/_code-snippet.html" %}
                  <button id="js-clone-continue-button" class="p-button--positive">Continue</button>
                </div>
              </div>
            </div>
          </section>
        </li>
        <li class="p-accordion__group">
          <button aria-expanded="false" type="button" class="p-accordion__tab" id="tab3" role="tab" aria-controls="#tab3-section" >
            <h4 class="u-no-margin--bottom">
              Step 3: Download your snapcraft.yaml
            </h4>
          </button>
          <section class="p-accordion__panel" id="tab3-section" role="tabpanel" aria-hidden="true" aria-labelledby="tab3-section">
            <div class="p-strip is-shallow">
              <div class="row">
                <div class="col-9">
                  <p>A <a href="/docs/snapcraft-format">snapcraft.yaml file</a> holds the basic meta data for the snap.</p>
                  <p>You can edit the meta data later on. For now we have generated an example snapcraft.yaml for you using the snap name you have chosen.</p>
                  <p>To discover more about the <code>snapcraft.yaml</code>, mouse over each piece of metadata in the interactive <code>.yaml</code> viewer below:</p>
                  <div class="p-annotated-code">
                    {% for key in snapcraft_yaml %}
                      <div class="p-annotated-code__block p-tooltip p-tooltip--btm-center">
                        <code>{{ snapcraft_yaml[key]|safe }}</code>
                        <span class="p-tooltip__message">{{ annotations[key]|safe }}</span>
                      </div>
                    {% endfor %}
                  </div>
                  <p>In order for your snap to build using the name you have chosen you'll need to replace the example application's <code>snapcraft.yaml</code> file.</p>
                  <p>First download new <code>snapcraft.yaml</code> file that contains your chosen name:</p>
                  <p><a class="p-button--positive" href="/first-snap/{{ language }}/snapcraft.yaml" download>Download snapcraft.yaml file</a>
                  <p>Next move or copy it to project folder making sure to override the old file.</p>
                </div>
              </div>
            </div>
          </section>
        </li>
      </ol>
    </div>
  </div>
  <div class="row">
    <p>Now we'll take a real world app, and package it as a snap</p>
  </div>

  <div class="row">
    <div class="col-8">

    </div>
  </div>
{% endblock %}

{% block fsf_pagination %}
  <a class="p-button--neutral" href="/first-snap/{{ language }}">
    &lsaquo; Previous: Install Snapcraft
  </a>

  <a class="p-button--positive u-float-right" href="/first-snap/{{ language }}/{{ os }}/build">
    Next: Build snap &rsaquo;
  </a>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function() {
        snapcraft.public.firstSnapFlow.initChooseName(
          document.getElementById("choose-name-form"),
           "{{language}}"
        );
        snapcraft.public.initAccordion('.p-accordion__list');
        snapcraft.public.initAccordionButtons(
          document.getElementById("js-clone-continue-button")
        );
      });
    });
  </script>
  {{ super() }}
{% endblock %}
